<template>
<div class="box">
  <span class="title">审批中心</span>
  <Tabs v-model="tabKey" class="tabs-app">
    <TabPane label="待处理" name="unhandled" class="tab-pane">
      <unhandled v-if="tabKey == 'unhandled'"></unhandled>
    </TabPane>
    <TabPane  label="已处理" name="processed" class="tab-pane">
      <processed v-if="tabKey == 'processed'"></processed>
    </TabPane>
  </Tabs>
</div>

</template>

<script>
import processed from './processed.vue'
import unhandled from './unhandled.vue'
import { approvalMix } from '@/views/todoCenter/myApproval/approval-mix'
import todoApi from '@api/todoCender'
export default {
  name: 'myApprovel',
  mixins: [approvalMix],
  components: {
    processed,
    unhandled
  },
  created() {
    this.init()
  },
  data() {
    return {
      tabKey: 'unhandled',
    }
  },
  methods: {
    init() {
      this.toRead()
    },
    toRead() {
      const { Bid, Ldap, taskCode } = this.$route.query
      if (Bid && Ldap && taskCode) {
        todoApi.toRead({ Bid, Ldap, taskCode }).then(()=> {
        }).catch(err => {
          throw new Error(err)
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  display: flex;
  flex-direction: column;
  .tabs-app {
    flex: 1;
    display: flex;
    flex-direction: column;
    /deep/.ivu-tabs-content {
      flex: 1;
    }
  }
}
.title {
  font-size: 18px;
  font-weight: bold;
  padding: 14px;

}
/deep/.single-table-con {
    height: 100%;
    display: flex;
    flex-direction: column;

}
</style>
